<template>
<div :class="body">
  <div class="container">
     <div class="blueBg">
        <div class="box signin">
          <h2>已有账户?</h2>
          <button class="signinBtn" @click="signin">Sign in</button>
        </div>
        <div class="box signup">
          <h2>没有账户?</h2>
          <button class="signupBtn" @click="signup">Sign up</button>
        </div>
      </div>
      <div :class="formBx">
        <div class="form signinForm">
          <form>
            <!-- <div style="text-align:center">
                <h1>易洁家政</h1>
            </div> -->
            <h3>登录</h3>
            <input type="text" placeholder="Username" :value="username" ref="username" required />
            <input type="password" placeholder="Password" :value="password" ref="password" required />
            <input type="submit" value="Login" @click.prevent="onSubmit"/>
            <a href="#" class="forgor" @click="forget">忘记密码?</a>
          </form>
        </div>
        <div class="form signupForm">
          <form>
            <h3>注册</h3>
            <input type="text" placeholder="Username" ref="Username" />
            <input type="password" placeholder="Password" ref="Password" />
            <input type="password" placeholder="Confirm Password" ref="Confirm" />

            <input type="submit" value="Register" @click.prevent="Register" />
          </form>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
// 引入辅助函数
import { mapMutations,mapActions} from 'vuex'
// 异步加载  引入axios
import { post_json } from '@/http/axios'
import { Toast } from 'vant';
export default {
     data(){
       return {
         formBx:"formBx",
         body:'body',
         username: "",
         password: "",
       }
     },
     methods:{
    ...mapMutations('user',['setToken']),
    ...mapActions('register', ['toRegister']),

    async onSubmit(values) {
      // 配置参数
      let params = {
        username: this.$refs.username.value,
        password: this.$refs.password.value
      }
      // 发送登录验证请求
      let res = await post_json('/user/login', params)
      // console.log(res);
      if (res.data.status == 200) {
        // 保存token
        this.setToken({token: res.data.data.token});
        // 跳转到首页
        localStorage.setItem('username',params.username)
        this.$router.push('/manager')
      }else{
        // 提示错误信息
        Toast(res.data.message);
      }
        //    console.log(this.$refs.username.value);
        //    console.log(this.$refs.password.value);
        },
        signin(){
           this.formBx="formBx"
          this.body="body"
        },
        signup(){
        this.formBx="formBx active"
          this.body="body_active"
        },
        Register(){
        if (this.$refs.Password.value != this.$refs.Confirm.value) {
        Toast('两次密码输入不一致,请重新输入！');
      }else{
        // 获取注册参数
        let params = {
          username: this.$refs.Username.value,
          password: this.$refs.Password.value,
        }
        // 调用注册请求
        this.toRegister(params)
        Toast('注册成功')
        }
    },
    forget(){
        Toast('自己想吧')
    }
  }
  }
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #03a9f4;
  transition: 0.5s;
}
.body_active {
  background: #f43648;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  transition: 0.5s;
}
.container {
  position: relative;
  width: 800px;
  height: 500px;
  margin: 20px;
}
.blueBg {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 45px rgba(0, 0, 0, 0.15);
}
.blueBg .box {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.blueBg .box h2 {
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom: 10px;
}

.blueBg .box button {
  cursor: pointer;
  padding: 10px 20px;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  border: none;
}

.formBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 45px rgba(0, 0, 0, 0.25);
  transition: 0.5s ease-in-out;
  overflow: hidden;
}

.formBx.active {
  left: 50%;
}
.formBx .form {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 50px;
  transition: 0.5s;
}
.formBx .signinForm {
  transition-delay: 0.25s;
}
.formBx.active .signinForm {
  left: -100%;
  transition-delay: 0s;
}
.formBx .signupForm {
  left: 100%;
}
.formBx.active .signupForm {
  left: 0;
}

.formBx .form form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.formBx .form form h3 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}
.formBx .form form input {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  outline: none;
  font-size: 16px;
  border: 1px solid #333;
}
.formBx .form form input[type='submit'] {
  background: #03a9f4;
  border: none;
  color: #fff;
  max-width: 100px;
  cursor: pointer;
}
.formBx.active .signupForm input[type='submit'] {
  background: #f43648;
}
.formBx .form form .forgot {
  color: #333;
}

@media (max-width: 991px) {
  .container {
    max-width: 400px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container .blueBg {
    top: 0;
    height: 100%;
  }
  .formBx {
    width: 100%;
    height: 500px;
    top: 0;
    box-shadow: none;
  }
  .blueBg .box {
    position: absolute;
    width: 100%;
    height: 150px;
    bottom: 0;
  }
  .box.signin {
    top: 0;
  }
  .formBx.active {
    left: 0;
    top: 150px;
  }
}
</style>